.el-main {
  overflow: unset;
}

.el-icon-close {
  color: #cecece !important;
}

// scrollbar
.el-scrollbar {
  height: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;

  ::-webkit-scrollbar {
    display: none;
  }
}

// form
.el-form {
  .el-form-item__label {
    padding-right: 24px;
    line-height: 32px;
    color: map-get($colors, 'dark');
  }

  .el-form-item__content {
    line-height: 32px;
  }

  &.el-form--inline .el-form-item {
    margin-right: 24px;
  }
}

.el-form-item {
  margin-bottom: 24px;
}

// button
.el-button {
  border-radius: 2px;
  padding: 8px 24px;
  text-align: center;
  transition: all 0.2s;
}

.el-button + .el-button {
  margin-left: 16px;
}

.el-button--text {
  margin-right: 16px;
  margin-left: 0 !important;
  padding-right: 0;
  padding-left: 0;

  &:last-of-type {
    margin-right: 0;
  }
}

// 默认button.el-button.is-plain
.el-button--default {
  &,
  &:hover,
  &:focus,
  &:active {
    border-color: map-get($colors, 'theme');
    color: map-get($colors, 'theme');
    background-color: transparent;
  }

  &:hover,
  &:active {
    background-color: map-get($bgColors, 'lightblue');
  }
}

// type="primary"
.el-button--primary {
  padding: 9px 24px;

  &,
  &:hover,
  &:focus,
  &:active {
    border: none;
    letter-spacing: 1px;
    color: map-get($colors, 'white');
    background-color: unset;
    background-image: $linearColor;
  }

  &:hover,
  &:active {
    background-image: linear-gradient(93deg, map-get($bgColors, 'deepblue'), map-get($bgColors, 'deepblue'));
  }
}

// other button
.el-button--text,
.el-button.is-plain {
  &,
  &:hover,
  &:focus,
  &:active {
    color: map-get($colors, 'theme');
  }
}

.el-button.is-plain {
  &:hover,
  &:focus {
    border-color: map-get($colors, 'theme');
  }
}

.el-button--text > span {
  display: flex;
  justify-content: center;
  align-items: center;
}

// input textarea
.el-input,
.el-textarea {
  .el-input__count {
    font-size: 14px;
    color: #cecece;
    background-color: transparent;
  }
}

.el-textarea .el-input__count {
  bottom: 0;
}

.el-textarea__inner {
  border-radius: 2px;
}

.el-input__inner,
.el-textarea__inner {
  border-radius: 2px;

  &,
  &:hover {
    border-color: #cecece;
    color: map-get($colors, 'dark');
  }
}

.el-input {
  .el-input__inner {
    border-radius: 2px;
    height: 32px;
    line-height: 32px;
  }

  &.is-active .el-input__inner,
  .el-input__inner:focus {
    border-color: map-get($bdColors, 'theme');
  }
}

.el-input__icon {
  height: 32px;
  line-height: 32px;
}

.el-input--small {
  font-size: 14px;
}

// select
.el-select {
  .el-input.is-focus .el-input__inner {
    border-color: map-get($bdColors, 'theme') !important;
  }

  .el-input .el-select__caret {
    color: map-get($colors, 'light');
  }
}

.el-select-dropdown {
  .el-select-dropdown__item {
    height: 30px;
    line-height: 30px;
    color: map-get($colors, 'grey');

    &.selected {
      color: map-get($colors, 'theme');
    }

    &.hover,
    &:hover {
      background-color: #f4f9ff;
    }
  }
}

.el-select__tags {
  .el-tag {
    border: 1px solid #8ac1ff;
    padding: 4px;
    max-width: 88px;
    height: 20px;
    line-height: 1;
    color: map-get($colors, 'grey');
    background-color: #f0f6ff;

    .el-tag__close,
    .el-tag__close:hover {
      left: 2px;
      color: #fff !important;
      background-color: #8ac1ff;
    }
  }
}

// upload
.upload-image {
  overflow: hidden;
  border: 1px dashed #cecece;
  border-radius: 2px;
  color: map-get($colors, 'light');
  transition: all 0.2s;

  .el-upload:focus {
    border: none;
    color: inherit;
  }

  &:hover {
    border-color: map-get($bdColors, 'theme');
    color: map-get($colors, 'theme');
  }
}

.is-error .upload-image {
  border-color: #f56c6c !important;

  &:hover {
    color: #f56c6c !important;
  }
}

.el-upload-dragger {
  border-color: #cecece;

  &:hover {
    border-color: map-get($bdColors, 'theme');
  }
}

// date-picker
.el-range-editor {
  &.is-active,
  &.is-active:hover {
    border-color: map-get($bdColors, 'theme');
  }

  .el-input__icon,
  .el-range-separator {
    height: 32px;
  }
}

.el-range-editor.el-input__inner {
  height: 32px;
  line-height: 32px;
}

.el-picker-panel {
  .el-time-panel__btn.confirm,
  .el-picker-panel__icon-btn:hover {
    color: map-get($colors, 'theme');
  }

  .el-date-table td {
    &.today span,
    &.available:hover {
      color: map-get($colors, 'theme');
    }

    &.end-date span,
    &.start-date span {
      background-color: map-get($bdColors, 'theme');
    }

    &.today.end-date span,
    &.today.start-date span {
      color: map-get($colors, 'white');
    }
  }
}

// quarter-picker
.el-quarter-panel {
  .el-picker-panel__icon-btn:hover {
    color: map-get($colors, 'theme');
  }

  .el-quarter-body .cell {
    &:hover,
    &.current {
      color: map-get($colors, 'theme') !important;
    }
  }
}

// color-picker
.el-color-picker {
  height: 32px;

  .el-color-picker__trigger,
  .el-color-picker__color {
    border: none;
    padding: 0;
  }

  .el-color-picker__trigger {
    width: 80px;
    height: 32px;

    .el-color-picker__color {
      overflow: hidden;
      border-radius: 2px;
    }
  }

  .el-color-picker__empty,
  .el-color-picker__icon {
    display: none !important;
  }
}

// radio
.el-radio {
  color: inherit;

  .el-radio__input.is-checked {
    .el-radio__inner {
      border-color: map-get($bdColors, 'theme');
      background-color: map-get($bgColors, 'theme');
    }

    & + .el-radio__label {
      color: map-get($colors, 'theme');
    }
  }
}

.el-radio-button:first-child .el-radio-button__inner {
  border-radius: 2px 0 0 2px;
}

.el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0 2px 2px 0;
}

.el-radio-button__inner {
  box-sizing: border-box;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 400;
  color: #333;

  &:hover {
    color: map-get($colors, 'theme');
  }
}

.el-radio-button__orig-radio:checked + .el-radio-button__inner {
  border-color: map-get($bdColors, 'theme');
  color: #0d79f4;
  background: #fff;
}

// checkbox
.el-checkbox {
  color: map-get($colors, 'dark');

  &.is-bordered.is-checked {
    border-color: map-get($bdColors, 'theme');
  }

  .el-checkbox__input {
    .el-checkbox__inner:hover {
      border-color: map-get($bdColors, 'theme');
    }

    &.is-checked .el-checkbox__inner,
    &.is-indeterminate .el-checkbox__inner {
      border-color: map-get($bdColors, 'theme');
      background-color: map-get($bgColors, 'theme');
    }

    &.is-checked + .el-checkbox__label {
      color: map-get($colors, 'theme');
    }
  }

  .el-checkbox__label {
    padding-left: 8px;
    line-height: 16px;
  }
}

// 圆形checkbox
.el-checkbox.circle {
  .el-checkbox__input {
    font-size: 0;
    vertical-align: bottom;

    &.is-checked + .el-checkbox__label {
      color: map-get($colors, 'theme');
    }

    &.is-checked .el-checkbox__inner {
      border-color: map-get($bdColors, 'theme');
      background-color: map-get($bgColors, 'theme');

      &::after {
        visibility: visible;
        border-color: white;
      }
    }

    .el-checkbox__inner {
      border-color: #bdbdbd;
      border-radius: 50%;
      width: 16px;
      height: 16px;

      &::after {
        top: 50%;
        left: 50%;
        visibility: hidden;
        border-color: inherit;
        transform: translate(-50%, -60%) rotate(45deg);
      }
    }
  }
}

.is-error .el-checkbox.is-bordered {
  border-color: #f56c6c;
}

// switch
.el-switch {
  &.is-checked .el-switch__core {
    border-color: map-get($colors, 'theme');
    background-color: map-get($colors, 'theme');
  }
}

// card
.el-card {
  border-radius: 10px;
  color: map-get($colors, 'dark');

  &.is-always-shadow,
  &.is-hover-shadow:focus,
  &.is-hover-shadow:hover {
    box-shadow: 0 4px 20px 1px rgba(0, 5, 97, 0.04);
  }

  .el-card__header {
    padding: 12px 24px;
  }

  .el-card__body {
    padding: 24px;
  }
}

// table
.el-table {
  border-top: none;
  width: 100%;

  .el-table__header-wrapper table,
  .el-table__body-wrapper table,
  .el-table__empty-block {
    width: 100% !important;
  }

  // .el-table__body,
  // .el-table__footer,
  // .el-table__header {
  //   table-layout: auto;
  // }

  .el-table__fixed::before {
    height: 0;
  }

  &,
  thead {
    color: map-get($colors, 'dark');
  }

  & .el-table__body-wrapper {
    border-width: 0 1px;
    border-color: #eee;
  }

  & th.el-table__cell {
    background-color: #f2f2f2;
  }

  &.el-table__row,
  .el-table .el-table__empty-block {
    background-color: #f5f6fa;
  }

  .el-table__row,
  .el-table__empty-block {
    background-color: #fcfcfc;
  }

  &.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
    background-color: unset;
  }

  & th.el-table__cell > .cell,
  .cell {
    padding: 0 32px;
  }

  td.el-table__cell {
    border-bottom-color: map-get($bdColors, 'grey');
    padding: 16px 0;
  }

  th.el-table__cell.is-leaf {
    border: none;
  }
}

// pagination
.pager {
  line-height: 1.4;

  .el-input-number,
  .el-input {
    width: 32px;
    height: 24px;
    line-height: 24px;

    .el-input__inner {
      border-color: map-get($colors, 'light');
      padding: 0;
      height: 24px;
      line-height: 24px;
      color: map-get($colors, 'light');
    }
  }
}

.el-pagination {
  padding-bottom: 0;
  font-weight: normal;

  .el-pager li {
    border: 1px solid map-get($bdColors, 'grey');
    min-width: 32px !important;
    height: 24px;
    font-size: 12px;
    line-height: 22px;
    color: #cecece !important;
  }

  .el-pager li.active + li {
    border: 1px solid map-get($bdColors, 'grey');
  }

  .el-pager .more::before {
    line-height: 24px;
  }

  &.is-background .el-pager li:not(.disabled).active {
    color: #fff !important;
    background-color: map-get($bgColors, 'theme');
  }

  &.is-background .el-pager li:not(.disabled):not(.active):hover,
  & button:not([disabled]):hover {
    color: map-get($bgColors, 'theme') !important;

    &:hover {
      border-color: map-get($bdColors, 'theme');
    }
  }

  & button,
  & span:not([class*='suffix']) {
    height: 24px;
    font-size: 12px;
    line-height: 24px;
    background-color: transparent;
  }

  &.is-background .btn-next,
  &.is-background .btn-prev,
  &.is-background .el-pager li {
    border-radius: 2px;
    background-color: transparent;
  }

  &.is-background .btn-next,
  &.is-background .btn-prev {
    border: 1px solid map-get($colors, 'light');
    min-width: 32px;
    color: map-get($colors, 'light');

    .el-icon {
      font-weight: normal;
    }
  }
}

// tab
.el-tabs {
  display: flex;
  flex-direction: column;
  height: 100%;

  .el-tabs__nav .el-tabs__item:last-child {
    border-top-right-radius: 2px !important;
    border-bottom-right-radius: 2px !important;
  }

  .el-tabs__nav .el-tabs__item:first-child {
    border-top-left-radius: 2px !important;
    border-bottom-left-radius: 2px !important;
  }

  > .el-tabs__header {
    margin-bottom: 0;

    .el-tabs__nav-wrap::after {
      height: 1px;
      background-color: map-get($bdColors, 'grey');
    }

    .el-tabs__item {
      padding: 0;
      width: 213px;
      height: 50px;
      font-size: 18px;
      line-height: 50px;
      text-align: center;
      color: map-get($colors, 'dark');

      &:hover,
      &.is-active {
        color: map-get($colors, 'theme') !important;
      }

      &.is-active {
        font-weight: bold;
      }
    }

    .el-tabs__active-bar {
      height: 1px;
      background-color: map-get($bgColors, 'theme');
    }
  }

  > .el-tabs__content {
    flex: 1;
    overflow: auto;
    padding: 24px 20px 24px 24px;
  }
}

// collapse
.el-collapse {
  border: none;

  .el-collapse-item__header {
    border-bottom-color: map-get($bdColors, 'grey');
    font-weight: bold;
    line-height: 1;
    color: map-get($colors, 'dark');
    transition: border-bottom-color 0.3s;

    .el-collapse-item__arrow {
      padding: 2px;
      transform: rotate(90deg);
    }

    &.is-active {
      .el-collapse-item__arrow {
        border-radius: 50%;
        color: map-get($colors, 'grey');
        background-color: #eee;
        transform: rotate(-90deg);
      }
    }
  }

  // .collapse.theme
  &.theme .el-collapse-item__header {
    &.is-active {
      border-bottom-color: map-get($bdColors, 'theme');
      color: map-get($colors, 'theme') !important;

      .el-collapse-item__arrow {
        border-radius: 50%;
        color: map-get($colors, 'white');
        background-image: linear-gradient(-120deg, #1267f2, #009ef6);
        transform: rotate(-90deg);
      }
    }
  }

  .el-collapse-item__wrap {
    border-bottom: none;
  }

  .el-collapse-item__content {
    font-size: 14px;
    color: map-get($colors, 'dark');
  }
}

// dropdown
.el-dropdown-menu {
  box-shadow: 0 4px 20px 1px rgba(0, 5, 97, 0.04);

  .el-dropdown-menu__item:not(.is-disabled):hover {
    color: map-get($colors, 'theme');
    background-color: #f4f9ff;
  }
}

//  dialog

.el-dialog {
  border-radius: 10px;

  .el-dialog__headerbtn:focus .el-dialog__close,
  .el-dialog__headerbtn:hover .el-dialog__close {
    color: map-get($colors, 'theme');
  }

  .el-dialog__header {
    border-bottom: 1px solid map-get($bdColors, 'grey');
    padding: 28px 24px 16px;

    .el-dialog__title {
      font-size: 20px;
      letter-spacing: 1px;
      color: map-get($colors, 'dark');
    }

    .el-dialog__headerbtn {
      top: 26px;
      right: 24px;
      font-size: 24px;
    }
  }

  .el-dialog__body {
    padding: 24px;
    color: map-get($colors, 'dark');
  }

  .el-dialog__footer {
    padding: 24px;

    .el-button {
      &.el-button--default {
        border-color: #999;
        color: #999;

        &:hover {
          border-color: map-get($bdColors, 'theme');
          color: map-get($colors, 'theme');
          background-color: transparent;
        }
      }
    }
  }
}

// messageBox
.el-message-box {
  padding-bottom: 0;

  .el-message-box__header {
    border-bottom: 1px solid #eee;
    padding: 28px 24px 16px 24px;

    .el-message-box__headerbtn {
      top: 29px;
      right: 29px;
    }
  }

  .el-message-box__content {
    box-sizing: border-box;
    padding: 24px;
    min-height: 120px;
  }

  .el-message-box__btns {
    padding: 0 24px 24px 24px;
  }
}

// steps
.el-steps {
  .el-step__head {
    .el-step__line {
      background-color: #cce3ff;
    }

    &.is-finish {
      color: map-get($colors, 'theme');

      .el-step__icon {
        border-color: map-get($colors, 'theme');
        color: #fff;
        background-color: map-get($colors, 'theme');
      }
    }

    &.is-process {
      .el-step__icon {
        border-color: #cce3ff;
        color: #fff;
        background-color: #cce3ff;
      }
    }
  }

  .el-step__main {
    .el-step__title {
      &.is-process {
        font-weight: 400;
        color: map-get($colors, 'light');
      }

      &.is-wait {
        font-weight: 400;
        color: map-get($colors, 'light');
      }
    }
  }
}

// tag
.el-tag {
  border-radius: 2px;
  padding: 0 8px;
  height: 28px;
  line-height: 26px;
  color: map-get($colors, 'theme');

  .el-tag__close {
    color: #fff;
    background-color: map-get($bgColors, 'theme');
    transform: scale(0.75);
  }

  &.is-hit {
    border-color: map-get($bdColors, 'theme');
  }
}

// cascader
.el-cascader__dropdown {
  .el-scrollbar__wrap {
    overflow-y: auto;
    max-height: 300px;
  }
}

.el-popover {
  padding: 8px;
  line-height: 1;
}

// tooltip
.el-tooltip__popper {
  border-radius: 2px;
  padding: 9px 8px;
  font-size: 14px;

  &.is-light {
    border: 1px solid #999;
  }
}

.el-slider {
  width: 360px;

  .el-input {
    width: 78px;
  }

  .el-slider__bar {
    background-color: map-get($bgColors, 'theme');
  }

  .el-slider__button {
    border-color: map-get($bdColors, 'theme');
  }
}

.el-alert {
  &.el-alert--primary {
    color: map-get($colors, 'light');
    background: map-get($bgColors, 'lightblue');
  }
}
